<template>
  <div class="Echarts">
    <div style="display: flex;flex-direction: row;margin-top: 50px">
      <div id="main" style="width: 700px;height: 400px;"></div>

      <div id="bar" style="width: 700px;height: 400px"></div>
    </div>
    <div style="height: 0px"></div>
    <div style="display: flex;flex-direction: row;margin-top: 0px">
    <div id="pie" style="width: 1200px;height: 700px;margin-top: 100px"></div>
    <div id="pie1" style="width: 900px;height: 600px;margin-top: 100px"></div>
    </div>
  </div>
</template>

<script>
  import request from '../utils/request'

  export default {
    name: 'Echarts',
    methods: {
      myEcharts() {
        var myChart = this.$echarts.init(document.getElementById('main'));
        var myChart1 = this.$echarts.init(document.getElementById('pie'));
        var myChart2 = this.$echarts.init(document.getElementById('bar'));
        var myChart3 = this.$echarts.init(document.getElementById('pie1'));
        //配置图表
        var option = {
          grid: {          //显示数据的图表位于当前canvas的坐标轴
            x: 50,
            y: 55,
            x2: 50,
            y2: 60,
            borderWidth: 1
          },
          title: {
            left: 'left',
            textStyle: {
              color: 'green',
              fontStyle: 'normal',
              fontWeight: 'bold',
            },
            text: '销量情况',
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          tooltip: {},
          legend: {
            top: 'top'
          },
          xAxis: {
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [],
            name: '销量',
            type: 'line',
            areaStyle:{
              color:'green'
            },
            smooth:true,


            itemStyle: {
              borderRadius: 8
            },
          },
            {
              data: [ 100,500,650,736,1007],
              name: '模拟销量',
              type: 'line',

              smooth:true,
              areaStyle:{
                color:'skyblue'
              },
              stack: 'all',
              itemStyle: {
                borderRadius: 8
              },
            },
          ]
        };
        //饼图
        var pieOption = {
          title: {
            text: '南丁格尔玫瑰图',
            textStyle:{

            },

            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'top'
          },

          series: [
            {

              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: [{value:'',name:''}]
            }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        };
        //饼图
      var  pie1option = {
          title: {
            text: 'Referer of a Website',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: '', name: '' },

              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        //柱状图
        var baroption = {
          title: {
            text: '柱状图'
          },
          legend: {
            top: 'top'
          },
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          xAxis: {
            type: 'category',
            data: [],
            boundaryGap: true,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'销量',
              data: [],
              type: 'bar'
            },
            {
              name:'模拟数据',
              data: [100,200,20,536,57],
              type: 'bar'
            },
          ]
        };
        request.get("/echarts").then(res => {
          var xArr = new Array()
          var yArr = new Array()
          for (var i = 0; i < res.data.length; i++) {
            xArr.push(res.data[i].name)
            yArr.push(res.data[i].count)
          }
          //折线图
          option.xAxis.data = xArr;
          option.series[0].data = yArr
          myChart.setOption(option);

          //柱状图
          baroption.xAxis.data = xArr;
          baroption.series[0].data = yArr
          myChart2.setOption(baroption);

          //饼图
          res.data.forEach(item => {
            pieOption.series[0].data.push({name: item.name, value: item.count})
          })
          myChart1.setOption(pieOption)

          res.data.forEach(item => {
            pie1option.series[0].data.push({name: item.name, value: item.count})
          })
          myChart3.setOption(pie1option)

        })
      }
    },
    mounted() {
      this.myEcharts();
    }
  }
</script>

<style>

</style>
